<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>首页</title>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-touch-fullscreen" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<meta name="format-detection" content="address=no">
		<link rel="stylesheet" type="text/css" href="css/common.css">
		<link rel="stylesheet" type="text/css" href="css/index.css">
		<link rel="stylesheet" type="text/css" href="css/mui.min.css" />
		<link rel="stylesheet" href="css/reset.css">
		<link href="css/layout.min.css" rel="stylesheet" />
		<link href="css/scs.min.css" rel="stylesheet" />
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/iscroll.js"></script>
		<script type="text/javascript" src="js/jquery.flexslider-min.js"></script>
		<script src="js/hmt.js" type="text/javascript"></script>
		<script type="text/javascript" src="js/index.js"></script>
		<script src="js/swiper.min.js" type="text/javascript"></script>
		<link rel="stylesheet" href="css/layui/css/layui.css" media="all">
	</head>

	<body>
		<header class="hasManyCity" id="header">
			<div name="addr" class="cityBtn" style="text-align:center;float: left;" id="myAddrs" data-key="4-84-1298" value="山西省 太原市 万柏林区">地址</div>

			<div id="" class="searchBox">
				<a href="search.html">
					<i class="icon-search"></i>
					<span>请输入您想找的内容</span>
				</a>
			</div>
		</header>

		<div id="container">
			<div id="main" style="padding-top: 38px;">
				<div id="scroller">
					<section class="banner">
						<div class="swiper-container swiper-container1">
							<div class="swiper-wrapper bannerwidth">
								<div class="swiper-slide swiper-slide-duplicate">
									<a href="#">
										<img src="img/55dec2a5c2fa3.png">
									</a>
								</div>
								<div class="swiper-slide">
									<a href="#">
										<img src="img/55dec2a5c2fa3.png">
									</a>
								</div>

								<div class="swiper-slide swiper-slide-duplicate">
									<a href="#">
										<img src="img/55dec2a5c2fa3.png">
									</a>
								</div>
								<div class="swiper-slide">
									<a href="#">
										<img src="img/55dec2a5c2fa3.png">
									</a>
								</div>
							</div>
							<div class="swiper-pagination swiper-pagination1">
							</div>
						</div>
					</section>

					<section class="slider">
						<div class="swiper-container swiper-container2">
							<div class="swiper-wrapper tuangouwidth">
								<div class="swiper-slide swiper-slide-duplicate">
									<ul class="icon-list">
										<li class="icon">
											<a href="self.html">
												<span class="icon-circle">
													<img src="img/b1.png">
												</span>
												<span class="icon-desc">餐饮</span>
											</a>
										</li>
										<li class="icon">
											<a href="tourism.html">
												<span class="icon-circle">
													<img src="img/a7.png">
												</span>
												<span class="icon-desc">旅游</span>
											</a>
										</li>
										<li class="icon">
											<a href="yule.html">
												<span class="icon-circle">												
													<img src="img/a5.png">
												</span>
												<span class="icon-desc">休闲娱乐</span>
											</a>
										</li>
										<li class="icon">
											<a href="delivery.html">
												<span class="icon-circle">
													<img src="img/a2.png">
												</span>
												<span class="icon-desc">购物</span>
											</a>
										</li>
										<li class="icon">
											<a href="self.html">
												<span class="icon-circle">
													<img src="img/b6.png">
												</span>
												<span class="icon-desc">生活服务</span>
											</a>
										</li>
										<li class="icon">
											<a href="hotel.html">
												<span class="icon-circle">												
													<img src="img/a6.png">
												</span>
												<span class="icon-desc">酒店</span>
											</a>
										</li>
										<li class="icon">
											<a href="renting.html">
												<span class="icon-circle">												
													<img src="img/b5.png">
												</span>
												<span class="icon-desc">汽车</span>
											</a>
										</li>
										<li class="icon">
											<a href="renting.html">
												<span class="icon-circle">												
													<img src="img/b8.png">
												</span>
												<span class="icon-desc">其他</span>
											</a>
										</li>
									</ul>
								</div>
							</div>
							<div class="swiper-pagination swiper-pagination2">
							</div>
						</div>
					</section>
				</div>

				<!--专享推荐-->
				<div class="sy_title mb10">
					<span class="left">热门推荐</span>
					<a href="#" class="fr morethree">更多&gt;&gt;</a>
				</div>

				<!--发布的信息-->
				<ul class="flow-default" id="LAY_demo1">
					<li id=card>
						<div class="mui-card">
							<!--页眉，放置标题-->
							<div class="card-head" width="100px">
								<img class="card-hear-1" src="img/footer_home_active.png" width="16%" />
								<p style="display: inline-block;">
									冯宝宝
									<sup>
									<img src="img/vip00.png" width="30px"/>
									<img src="img/authentication.png" height="22px" style="margin-left: 48px;"/>
									<img src="img/star.png" height="22px"/>&nbsp;
									<img src="img/enterprise.png" height="22px"/>&nbsp;
									<img src="img/active.png" height="22px"/>&nbsp;
									<img src="img/phone.png" height="22px"/>&nbsp;
								</sup>
								</p>
							</div>
							<!--内容区-->
							<div class="mui-card-content">
								<p style="margin-bottom: 2px;">&nbsp;3000万像素，值得你的期待</p>
								<img src="img/553b0e58b6c52.jpg" width="49%" />
								<img src="img/553b0e58b6c52.jpg" width="49%" />
							</div>
							<!--页脚，放置补充信息或支持的操作-->
							<div class="mui-card-footer">
								<span>发布于&nbsp;:&nbsp;<b>2018-06-05</b></span>
								<a href="details.html">查看详情>></a>
							</div>
						</div>
					</li>
					<li id=card>
						<div class="mui-card">
							<!--页眉，放置标题-->
							<div class="card-head" width="100px">
								<img class="card-hear-1" src="img/footer_home_active.png" width="16%" />
								<p style="display: inline-block;">
									冯宝宝
									<sup>
									<img src="img/vip00.png" width="30px"/>
									<img src="img/authentication.png" height="22px" style="margin-left: 48px;"/>
									<img src="img/star.png" height="22px"/>&nbsp;
									<img src="img/enterprise.png" height="22px"/>&nbsp;
									<img src="img/active.png" height="22px"/>&nbsp;
									<img src="img/phone.png" height="22px"/>&nbsp;
								</sup>
								</p>
							</div>
							<!--内容区-->
							<div class="mui-card-content">
								<p style="margin-bottom: 2px;">&nbsp;3000万像素，值得你的期待</p>
								<img src="img/553b0e58b6c52.jpg" width="49%" />
								<img src="img/553b0e58b6c52.jpg" width="49%" />
							</div>
							<!--页脚，放置补充信息或支持的操作-->
							<div class="mui-card-footer">
								<span>发布于&nbsp;:&nbsp;<b>2018-06-05</b></span>
								<a href="#">查看详情>></a>
							</div>
						</div>
					</li>
					<li id=card>
						<div class="mui-card">
							<!--页眉，放置标题-->
							<div class="card-head" width="100px">
								<img class="card-hear-1" src="img/footer_home_active.png" width="16%" />
								<p style="display: inline-block;">
									冯宝宝
									<sup>
									<img src="img/vip00.png" width="30px"/>
									<img src="img/authentication.png" height="22px" style="margin-left: 48px;"/>
									<img src="img/star.png" height="22px"/>&nbsp;
									<img src="img/enterprise.png" height="22px"/>&nbsp;
									<img src="img/active.png" height="22px"/>&nbsp;
									<img src="img/phone.png" height="22px"/>&nbsp;
								</sup>
								</p>
							</div>
							<!--内容区-->
							<div class="mui-card-content">
								<p style="margin-bottom: 2px;">&nbsp;3000万像素，值得你的期待</p>
								<img src="img/553b0e58b6c52.jpg" width="49%" />
								<img src="img/553b0e58b6c52.jpg" width="49%" />
							</div>
							<!--页脚，放置补充信息或支持的操作-->
							<div class="mui-card-footer">
								<span>发布于&nbsp;:&nbsp;<b>2018-06-05</b></span>
								<a href="#">查看详情>></a>
							</div>
						</div>
					</li>
					<li id=card>
						<div class="mui-card">
							<!--页眉，放置标题-->
							<div class="card-head" width="100px">
								<img class="card-hear-1" src="img/footer_home_active.png" width="16%" />
								<p style="display: inline-block;">
									冯宝宝
									<sup>
									<img src="img/vip00.png" width="30px"/>
									<img src="img/authentication.png" height="22px" style="margin-left: 48px;"/>
									<img src="img/star.png" height="22px"/>&nbsp;
									<img src="img/enterprise.png" height="22px"/>&nbsp;
									<img src="img/active.png" height="22px"/>&nbsp;
									<img src="img/phone.png" height="22px"/>&nbsp;
								</sup>
								</p>
							</div>
							<!--内容区-->
							<div class="mui-card-content">
								<p style="margin-bottom: 2px;">&nbsp;3000万像素，值得你的期待</p>
								<img src="img/553b0e58b6c52.jpg" width="49%" />
								<img src="img/553b0e58b6c52.jpg" width="49%" />
							</div>
							<!--页脚，放置补充信息或支持的操作-->
							<div class="mui-card-footer">
								<span>发布于&nbsp;:&nbsp;<b>2018-06-05</b></span>
								<a href="#">查看详情>></a>
							</div>
						</div>
					</li>
					<li id=card>
						<div class="mui-card">
							<!--页眉，放置标题-->
							<div class="card-head" width="100px">
								<img class="card-hear-1" src="img/footer_home_active.png" width="16%" />
								<p style="display: inline-block;">
									冯宝宝
									<sup>
									<img src="img/vip00.png" width="30px"/>
									<img src="img/authentication.png" height="22px" style="margin-left: 48px;"/>
									<img src="img/star.png" height="22px"/>&nbsp;
									<img src="img/enterprise.png" height="22px"/>&nbsp;
									<img src="img/active.png" height="22px"/>&nbsp;
									<img src="img/phone.png" height="22px"/>&nbsp;
								</sup>
								</p>
							</div>
							<!--内容区-->
							<div class="mui-card-content">
								<p style="margin-bottom: 2px;">&nbsp;3000万像素，值得你的期待</p>
								<img src="img/553b0e58b6c52.jpg" width="49%" />
								<img src="img/553b0e58b6c52.jpg" width="49%" />
							</div>
							<!--页脚，放置补充信息或支持的操作-->
							<div class="mui-card-footer">
								<span>发布于&nbsp;:&nbsp;<b>2018-06-05</b></span>
								<a href="#">查看详情>></a>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>

		<!--底部导航栏-->
		<footer id="footer">
			<div>
				<a href="index.html">
					<div class="icon i-1 on"></div>
					<p>首页</p>
				</a>
			</div>
			<div>
				<a href="index1.html">
					<div class="icon i-7"></div>
					<p>发布广告</p>
				</a>
			</div>
			<div>
				<a href="center.html">
					<div class="icon i-4"></div>
					<p>我的</p>
				</a>
			</div>
		</footer>
	</body>

	<script src="js/other.js" type="text/javascript" charset="utf-8"></script>
	<!--<script type="text/javascript" src="js/jquery.min1.js"></script>-->
	<script type="text/javascript" src="js/jquery.scs.min.js"></script>
	<script type="text/javascript" src="js/CNAddrArr.min.js"></script>
	<script src="css/layui/layui.js" charset="utf-8"></script>
	<script>
		layui.use('flow', function() {
			var flow = layui.flow;

			flow.load({
				elem: '#LAY_demo1' //流加载容器
					,
				scrollElem: '#LAY_demo1' //滚动条所在元素，一般不用填，此处只是演示需要。
					,
				done: function(page, next) { //执行下一页的回调

					//模拟数据插入
					setTimeout(function(card) {
						var lis = [];
						for(var i = 0; i < 8; i++) {
							lis.push('card' + ((page - 1) * 8 + i + 1) + 'card')
						}

						//执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
						//pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
						next(lis.join(''), page < 10); //假设总页数为 10
					}, 500);
				}
			});

			flow.load({
				elem: '#LAY_demo2' //流加载容器
					,
				scrollElem: '#LAY_demo2' //滚动条所在元素，一般不用填，此处只是演示需要。
					,
				isAuto: false,
				isLazyimg: true,
				done: function(page, next) { //加载下一页
					//模拟插入
					setTimeout(function() {
						var lis = [];
						for(var i = 0; i < 6; i++) {
							lis.push('<li><img lay-src="http://s17.mogucdn.com/p2/161011/upload_279h87jbc9l0hkl54djjjh42dc7i1_800x480.jpg?v=' + ((page - 1) * 6 + i + 1) + '"></li>')
						}
						next(lis.join(''), page < 6); //假设总页数为 6
					}, 500);
				}
			});

			//按屏加载图片
			flow.lazyimg({
				elem: '#LAY_demo3 img',
				scrollElem: '#LAY_demo3' //一般不用设置，此处只是演示需要。
			});

		});






		//省际联动--地址选择 
		$(function() {
			/** 
			 * 通过数组id获取地址列表数组
			 *
			 * @param {Number} id
			 * @return {Array} 
			 */
			function getAddrsArrayById(id) {
				var results = [];
				if(addr_arr[id] != undefined)
					addr_arr[id].forEach(function(subArr) {
						results.push({
							key: subArr[0],
							val: subArr[1]
						});
					});
				else {
					return;
				}
				return results;
			}
			/**
			 * 通过开始的key获取开始时应该选中开始数组中哪个元素
			 *
			 * @param {Array} StartArr
			 * @param {Number|String} key
			 * @return {Number} 
			 */
			function getStartIndexByKeyFromStartArr(startArr, key) {
				var result = 0;
				if(startArr != undefined)
					startArr.forEach(function(obj, index) {
						if(obj.key == key) {
							result = index;
							return false;
						}
					});
				return result;
			}

			//bind the click event for 'input' element
			$("#myAddrs").click(function() {
				var PROVINCES = [],
					startCities = [],
					startDists = [];
				//Province data，shall never change.
				addr_arr[0].forEach(function(prov) {
					PROVINCES.push({
						key: prov[0],
						val: prov[1]
					});
				});
				//init other data.
				var $input = $(this),
					dataKey = $input.attr("data-key"),
					provKey = 1, //default province 北京
					cityKey = 36, //default city 北京
					distKey = 37, //default district 北京东城区
					distStartIndex = 0, //default 0
					cityStartIndex = 0, //default 0
					provStartIndex = 0; //default 0

				if(dataKey != "" && dataKey != undefined) {
					var sArr = dataKey.split("-");
					if(sArr.length == 3) {
						provKey = sArr[0];
						cityKey = sArr[1];
						distKey = sArr[2];

					} else if(sArr.length == 2) { //such as 台湾，香港 and the like.
						provKey = sArr[0];
						cityKey = sArr[1];
					}
					startCities = getAddrsArrayById(provKey);
					startDists = getAddrsArrayById(cityKey);
					provStartIndex = getStartIndexByKeyFromStartArr(PROVINCES, provKey);
					cityStartIndex = getStartIndexByKeyFromStartArr(startCities, cityKey);
					distStartIndex = getStartIndexByKeyFromStartArr(startDists, distKey);
				}
				var navArr = [{ //3 scrollers, and the title and id will be as follows:
					title: "省",
					id: "scs_items_prov"
				}, {
					title: "市",
					id: "scs_items_city"
				}, {
					title: "区",
					id: "scs_items_dist"
				}];
				SCS.init({
					navArr: navArr,
					onOk: function(selectedKey, selectedValue) {
						$input.val(selectedValue).attr("data-key", selectedKey);
					}
				});
				var distScroller = new SCS.scrollCascadeSelect({
					el: "#" + navArr[2].id,
					dataArr: startDists,
					startIndex: distStartIndex
				});
				var cityScroller = new SCS.scrollCascadeSelect({
					el: "#" + navArr[1].id,
					dataArr: startCities,
					startIndex: cityStartIndex,
					onChange: function(selectedItem, selectedIndex) {
						distScroller.render(getAddrsArrayById(selectedItem.key), 0); //re-render distScroller when cityScroller change
					}
				});
				var provScroller = new SCS.scrollCascadeSelect({
					el: "#" + navArr[0].id,
					dataArr: PROVINCES,
					startIndex: provStartIndex,
					onChange: function(selectedItem, selectedIndex) { //re-render both cityScroller and distScroller when provScroller change
						cityScroller.render(getAddrsArrayById(selectedItem.key), 0);
						distScroller.render(getAddrsArrayById(cityScroller.getSelectedItem().key), 0);
					}
				});
			});
		});

		/* 返回退出程序 */
		document.addEventListener("plusready", function() {
			// 注册返回按键事件
			plus.key.addEventListener('backbutton', function() {
				// 事件处理
				plus.nativeUI.confirm("退出程序？", function(event) {
					console.log(event.index)
					if(!event.index) {
						event.index == 1;
						plus.runtime.quit();
					} else {}
				}, null, ["取消", "确定"]);
			}, false);
		});
	</script>

</html>